<script setup lang="ts">
import { watch } from "vue";
import { useAppStore } from "@renderer/store/modules/app";
import { useTimeStore } from "@renderer/store/modules/time";
import { TimerMode, TimerStatusMode } from "./types/GlobalEnum";
import { CacheSetting } from "./types/types";

const appStore = useAppStore();
const timeStore = useTimeStore();

// 切换计时模式
window.api.changeMode((mode: TimerMode) => {
    appStore.changeMode(mode);
});

// 修改计时默认时间
window.api.changeDefaultTime((time: number) => {
    appStore.changeDefaultTime(time);
});

// 修改时间制
window.api.changeDateSystem(() => {
    appStore.isTwentyFour = !appStore.isTwentyFour;
});

// 修改时间制
window.api.changeShowSeconds(() => {
    appStore.isShowSeconds = !appStore.isShowSeconds;
});

// 获取缓存设置
window.api.getCacheSetting(() => {
    return {
        color: appStore.color,
        mode: appStore.mode,
        fontSize: appStore.fontSize,
        isTwentyFour: appStore.isTwentyFour,
        defaultTime: appStore.defaultTime,
    } as CacheSetting;
});

// 当及时状态改变为超时时发送提示
watch(
    () => timeStore.status,
    (newVal) => {
        if (newVal === TimerStatusMode.timeout) {
            window.api.tip({ title: "cClock提示", body: "计时时间到啦！" });
        }
    },
    { deep: true }
);

// 当及时状态改变为超时时发送提示
watch(
    () => appStore.fontSize,
    (newVal) => {
        window.api.setWindowSize({
            width: newVal * 2,
            height: newVal * 0.75 + 40,
        });
    },
    { deep: true }
);

// app设置变更时发送通知到主进程修改设置
appStore.$subscribe(() => {
    window.api.sendCacheSettings({
        color: appStore.color,
        fontSize: appStore.fontSize,
        mode: appStore.mode,
        isTwentyFour: appStore.isTwentyFour,
        defaultTime: appStore.defaultTime,
    } as CacheSetting);
});
</script>

<template>
    <router-view></router-view>
</template>
